<template>
	<view class="message-input" :class="!data.isPaddingBtm ? 'message-input-pbm' : 'message-input-pbmNo'">
		<view class="message-input-item">
			<!-- 常用语按钮 -->
			<view class="u-m-r-14">
				<u-button :custom-style="data.customStyle" hover-class="none" :hair-line="false"
					@click="handleMenu('text')">常用语</u-button>
			</view>
			<!-- 输入框 -->
			<view class="u-flex-1 u-m-r-20">
				<!-- <textarea class="TUI-message-input-area" v-model="data.inputText" auto-height cursor-spacing="140"
					:show-confirm-bar="false" :focus="data.focus" :maxlength="-1" placeholder="请输入消息内容"
					@focus="inputBindFocus" @input="inputBindInput" /> -->
				<input class="TUI-message-input-area" :adjust-position="true" cursor-spacing="140"
					v-model="data.inputText" @input="inputBindInput" maxlength="140" type="text"
					placeholder-class="input-placeholder" placeholder="请输入消息内容" @focus="inputBindFocus"
					@blur="data.isPaddingBtm = false" />
			</view>
			<!-- 右侧按钮栏 -->
			<view class="u-flex u-row-between">
				<!-- 表情按钮 -->
				<u-image class="u-m-r-14" src="/pages/pagesMessage/static/emoji.png" width="50" height="50"
					@click="handleMenu('emoji')"></u-image>
				<!-- 输入框有内容 展示发送按钮 -->
				<view v-if="data.isInputText">
					<u-button :custom-style="data.customStyle" hover-class="none"
						@click="keywordReplace(data.inputText)">发送</u-button>
				</view>
				<!-- 输入框无内容 展示更多按钮 -->
				<view v-else>
					<!-- 未展开 展示更多按钮 -->
					<u-image v-show="!data.displayFlag" src="/pages/pagesMessage/static/plus.png" width="50" height="50"
						@click="handleMenu('extension')"></u-image>
					<!-- 展开  展示关闭按钮 -->
					<u-image v-show="data.displayFlag" src="/pages/pagesMessage/static/close.png" width="50" height="50"
						@click="handleMenu('')"></u-image>
				</view>
			</view>
		</view>

		<!-- 常用语 -->
		<view v-if="data.displayFlag == 'text'" class="TUI-Extensions u-border-top">
			<scroll-view class="tui-common-words-list" scroll-y="true" enable-flex="true">
				<view v-for="(item, index) in data.list" :key="index" class="tui-common-words-item "
					@click="$handleSendTextMessage(item.content)">
					{{ item.content }}
				</view>
			</scroll-view>
			<view class="tui-common-words-bottom">
				<view class="u-flex" @click="toCommonPhrases('add')">
					<u-image src="/pages/pagesMessage/static/add.png" :width="40" :height="40"></u-image>
					<view class="u-m-l-10">添加</view>
				</view>
				<view class="u-flex" @click="toCommonPhrases('edit')">
					<u-image src="/pages/pagesMessage/static/edit.png" :width="40" :height="40"></u-image>
					<view class="u-m-l-10">管理</view>
				</view>
			</view>
		</view>
		<!-- 表情 -->
		<view v-if="data.displayFlag == 'emoji'" class="TUI-Extensions u-border-top">
			<TUI-Emoji @enterEmoji="appendMessage"></TUI-Emoji>
		</view>
		<!-- 更多 -->
		<view v-if="data.displayFlag == 'extension'" class="TUI-Extensions u-border-top">
			<view class="more u-flex u-flex-wrap">
				<!-- 发送简历 -->
				<view class="more-item" @click="handleSendResume" v-if="utype == 2">
					<u-image src="/pages/pagesMessage/static/bottom-more-resume.png" :width="132"
						:height="132"></u-image>
					<view>发送简历</view>
				</view>
				<!-- 发送位置 -->
				<view class="more-item" @click="handleOpenMap" v-if="utype == 1">
					<u-image src="/pages/pagesMessage/static/bottom-more-position.png" :width="132"
						:height="132"></u-image>
					<view>发送位置</view>
				</view>
				<!-- 邀投简历 -->
				<view class="more-item" @click="data.isDelivery = true" v-if="utype == 1">
					<u-image src="/pages/pagesMessage/static/bottom-more-deliver.png" :width="132"
						:height="132"></u-image>
					<view>邀请投递</view>
				</view>
				<!-- 面试安排 -->
				<!-- <view class="more-item" @click="handleInterview">
						<u-image src="/static/message/bottom-more-interview.png" :width="132" :height="132"></u-image>
						<view>面试安排</view>
					</view> -->
				<!-- 屏蔽聊天 -->
				<view class="more-item" @click="data.isBlacklist = true">
					<u-image src="/pages/pagesMessage/static/bottom-more-shield.png" :width="132"
						:height="132"></u-image>
					<view>屏蔽聊天</view>
				</view>
			</view>
		</view>

		<u-modal v-model="data.isBlacklist" title="系统提示"
			:content="`屏蔽${utype == 1 ? '个人' : '企业'}后，该${utype == 1 ? '个人' : '企业'}将无法与您继续沟通，如需解除屏蔽，请在职聊设置里修改。`"
			show-cancel-button @concel="data.isBlacklist =false" @confirm="handleBlackList"></u-modal>
		<u-modal v-model="data.isDelivery" title="系统提示" content="确定邀请对方投递简历吗？" show-cancel-button
			@concel="data.isDelivery =false" @confirm="handleInvitationDelivery"></u-modal>
	</view>
</template>

<script setup>
	import TUIEmoji from '../message-elements/emoji';
	import {
		nextTick,
		onMounted,
		reactive,
		watch,
		getCurrentInstance
	} from "vue";
	import {
		useUserIm
	} from '/stores/userIm.js'
	const IM = useUserIm()
	const Components = {
		TUIEmoji
	}
	const data = reactive({
		// 按钮样式
		customStyle: {
			backgroundColor: '#00D075',
			color: '#fff',
			fontSize: '26rpx',
			height: "50rpx",
			padding: '0 20rpx',
			border: 'none'
		},
		// 常用语列表
		list: [],
		focus: false, //input聚焦
		inputText: '', //input输入内容
		isInputText: false, // 监听输入框是否有值
		displayFlag: '', // 展示更多
		// 屏蔽弹框
		isBlacklist: false,
		height: 55,
		isPaddingBtm: false,
		// 邀请投递弹框
		isDelivery: false
	})
	const props = defineProps({
		conversation: Object,
		commonWordsMatch: Array,
		utype: [String,Number]
	})
	const emit = defineEmits(['initHeight'])
	const instance = getCurrentInstance(); // 获取组件实例
	defineExpose({
		data
	})
	watch(() => props.commonWordsMatch, (nv) => {
		data.list = nv
	}, {
		immediate: true,
		deep: true
	})
	watch(() => data.inputText, (nv) => {
		data.isInputText = !uni.$u.test.isEmpty(nv[0])
	}, {
		immediate: true
	})
	// 去常用语管理页面
	const toCommonPhrases = (type) => {
		if (type == 'edit') {
			uni.$u.route('pages/pagesMessage/commonPhrases/index')
		} else {
			uni.$u.route('pages/pagesMessage/commonPhrases/detail', {
				item: JSON.stringify(null)
			})
		}
	}
	// 实时获取当前底部输入框高度
	const inputBindInput = async () => {
		// #ifndef MP-WEIXIN
		let res = await uni.$u.getRect('.message-input');
		data.height = res.height
		emit('initHeight', res.height)
		// #endif
		// #ifdef MP-WEIXIN
		const query = uni.createSelectorQuery().in(instance);
		query.select('.message-input').boundingClientRect(res => {
			data.height = res.height
			emit('initHeight', res.height)
		}).exec();
		// #endif
	}
	// 发送消息
	const handleSendText = () => {
		if (data.inputText === '') {
			return false
		}
		var msgObj = {
			controller: 'SendText',
			action: 'index',
			args: {
				token: IM.imToken,
				chatid: props.conversation.chat_id,
				content: data.inputText,
				cids: props.conversation.cid,
				title: uni.getStorageSync('userName')
			}
		}
		IM.webSocket_send(msgObj)
		data.inputText = ''
		nextTick(() => {
			inputBindInput()
		})
	}
	// 发送按钮事件
	const keywordReplace = async (commonText) => {
		let params = {
			content: commonText
		}
		let res = await uni.$u.api.keywordReplace({
			params
		})
		data.inputText = res
		data.displayFlag = ''
		handleSendText()
	}
	// 屏蔽聊天
	const handleBlackList = async () => {
		let res = await IM.getBlacklistAdd(props.conversation.chat_id)
		uni.$u.toast('屏蔽成功')
		setTimeout(() => {
			uni.$u.route({
				type: 'back'
			})
		}, 500)
	}
	// 面试安排
	const handleInterview = () => {

	}
	// 发送位置
	const handleOpenMap = () => {
		uni.chooseLocation({
			success: function(res) {
				var msgObj = {
					controller: 'SendMap',
					action: 'index',
					args: {
						token: IM.imToken,
						chatid: props.conversation.chat_id,
						lat: res.latitude,
						lng: res.longitude,
						title: res.name,
						address: res.address,
						cids: props.conversation.cid,
						content: '对方已发送位置',
						title: uni.getStorageSync('userName')
					}
				}
				IM.webSocket_send(msgObj)
				data.displayFlag = ''
				nextTick(() => {
					inputBindInput()
				})
			}
		});
	}
	// 邀请投递
	const handleInvitationDelivery = () => {
		var msgObj = {
			controller: 'SendInvite',
			action: 'invite',
			args: {
				token: IM.imToken,
				chatid: props.conversation.chat_id,
				cids: props.conversation.cid,
				content: '对方已邀请投递简历',
				title: uni.getStorageSync('userName')
			}
		}
		IM.webSocket_send(msgObj)
		data.displayFlag = ''
		nextTick(() => {
			inputBindInput()
		})
	}
	// 发送简历
	const handleSendResume = () => {
		var msgObj = {
			controller: 'SendResume',
			action: 'index',
			args: {
				token: IM.imToken,
				chatid: props.conversation.chat_id,
				cids: props.conversation.cid,
				content: '对方已发送简历',
				title: uni.getStorageSync('userName')
			}
		}
		IM.webSocket_send(msgObj)
		data.displayFlag = ''
		nextTick(() => {
			inputBindInput()
		})
	}
	// 发送常用语
	const $handleSendTextMessage = (commonText) => {
		// data.inputText = commonText
		keywordReplace(commonText)
	}
	// 表情
	const appendMessage = (e) => {
		data.inputText = data.inputText + e.detail.message
	}
	// 点击其他操作
	const handleMenu = (flag) => {
		let targetFlag = flag;

		if (data.displayFlag === flag) {
			targetFlag = '';
		}
		data.displayFlag = targetFlag
		nextTick(() => {
			inputBindInput()
		})
	}
	//  输入框聚焦时 改变位置
	const inputBindFocus = (e) => {
		data.isPaddingBtm = true
		if (data.displayFlag) {
			data.displayFlag = ''
			nextTick(() => {
				inputBindInput()
			})
		}
	}
</script>
<style lang="scss" scoped>
	.message-input {
		position: fixed; // input 所在盒子设置绝对定位
		flex-shrink: 0;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 199;
		background-color: #fff;
		font-size: 24rpx;

		&-item {
			padding: 30rpx 20rpx;
			display: flex;
			align-items: flex-end;
		}
	}

	.message-input-pbm {
		/* #ifdef MP-WEIXIN */
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
	}

	.message-input-pbmNo {
		/* #ifdef MP-WEIXIN */
		padding-bottom: 0;
		/* #endif */
	}

	.TUI-Extensions {
		display: flex;
		flex-wrap: wrap;
		width: 100vw;
		height: 100%;
		background-color: #fff
	}

	.tui-common-words-list {
		height: 450rpx;
	}

	.tui-common-words-bottom {
		padding: 30rpx 100rpx;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		color: #101010;
		font-size: 34rpx;
	}

	.TUI-message-input-area {
		width: 100%;
		height: 100%;
	}


	.tui-common-words-item {
		border-bottom: 2rpx solid #EEF0F3;
		background-color: #FFFFFF;
		font-size: 28rpx;
		color: #101010;
		letter-spacing: 0;
		padding: 40rpx;
	}

	.more {
		padding: 32rpx 36rpx;
		width: 100%;
		justify-content: flex-start;

		&-item {
			margin-right: 50rpx;
			color: #101010;
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			view {
				margin-top: 10rpx;
			}
		}
	}
</style>